<template>
<div>
     <div id="mainid" style="width: 1200px;height:580px;"></div>
<!-- <div v-for="item in TopUserScore" :key="item.id">
    {{item}}
</div> -->
</div>
</template>

<script>
import * as echarts from 'echarts'
// import _ from 'lodash'
export default {
  props: ['TopUserScore'],
  data () {
    return {
      option: {
        title: {
          text: 'Top10积分榜',
          // link: 'http://baidu.com',
          textStyle: {
            fontSize: 20, // 标题文字大小颜色
            color: '#ec2d7a'
          }
        },
        xAxis: {
          type: 'category', // 类目轴
          data: [], // 轴属性
          // data: ['a', 'b', 'c', 'td', 'a', 'b', 'c', '2d'],
          textStyle: {
            fontSize: 2, // 标题文字大小颜色
            color: '#432'
          },
          axisLabel: {
            interval: 0
          }
          // 'a', 'b', 'c', 'd'
          //
        },
        yAxis: {
          type: 'value' // 数值轴
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '标题',
            type: 'bar', // 图标类型
            data: ''
          }
        ]
      },
      ydata: [],
      xdata: []
    }
  },
  methods: {},
  created () {
    // for (const elem of this.TopUserScore) {
    //   // this.xdata.push(elem.alias)
    //   // this.ydata.push(elem.score)
    //   // const { data } = elem
    //   // console.log(this.xdata + this.ydata)
    //   console.log(elem.alias)
    //   // console.log(elem.score)
    //   // this.option.xAxis.data.concat(elem.alias)
    //   // this.option.series[0].data.concat(elem.score)
    // }

    // this.option.xAxis.data = ['a', 'b', 'c', 'd']
    // this.option.series[0].data = ['11', '22', '33', '44']
  },
  components: {},
  mounted () {
    // for (var i = 0; i < 10; i++) {
    //   this.xdata.push(this.TopUserScore[i].alias)
    //   this.ydata.push(this.TopUserScore[i].score)
    // };
    // // console.log(this.xdata)
    // this.option.series[0].data = this.ydata
    // this.option.xAxis.data = this.xdata

    this.option.xAxis.data = JSON.parse(window.localStorage.getItem('xAxisDataAlias'))
    this.option.series[0].data = JSON.parse(window.localStorage.getItem('seriesDataScore'))

    var MyCharts = echarts.init(document.getElementById('mainid'), 'dark')
    MyCharts.setOption(this.option)
  },
  watch: {
  }

}
</script>

<style lang="less" scoped>

</style>
